<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内容页</title>
		<link rel="stylesheet" type="text/css" href="./Public/Home/css/content.css"/>
		<script src="./Public/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./Public/Home/js/content.js" type="text/javascript" charset="utf-8"></script>
		<!--城市联动插件开始-->
		<script src="./Public/area.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//初始化方法
				area.init('area');
				//修改的时候默认被选中效果
				area.selected('河南','开封','兰考县');
			})
		</script>
		<!--城市联动插件结束-->
	</head>
	<body>
		<!--======头部登陆部分======-->
		<div id="header">
			<div class="topbar">
				<div class="inner">
					<ul>
						<li><a href=""><em class="weixin"></em>微信登录</a></li>
						<li><a href=""><em class="qq"></em>QQ登陆</a></li>
						<li><a href="">登陆</a></li>
						<li><a href="">注册</a></li>
						<li><a href="{{U('Home/Cart/index')}}"><em class="cart"></em>我的购物车<span class="cart_num"><?php if(isset($_SESSION['cart'])){?> {{$_SESSION['cart']['total_rows']}} <?php }else{;?>0<?php };?></span></a></li>
						<li><a href=""><em class="order"></em>我的订单</a></li>
						<li><a href=""><em class="imember"></em>美丽说会员</a></li>
						<li class="App" style="position: relative;height: 30px ;width:110px;">
							<a href="javascript:;" >
								<em class="mob"></em>
								下载App
								<em class="arrow"></em>
							</a>
							<ul class="down_app" >
								<li class="down_app_">
									<img src="./Public/Home/image/erweima.png"/>
									<div class="client">美丽说客户端</div>
									<div style="text-align: left;">发现流行，只做正确流行款</div>		
								</li>
							</ul>
						</li>
						<li><a href="" style="border: none;">帮助中心</a></li>
					</ul>
				</div>
				
			</div>
		<!--登录部分结束-->
			<!--搜索区域-->
			<div class="shop_search_wrap" style="height: 120px;">
				<div class="inner">					
					<a class="logo" href=""><img src="./Public/Home/image/logo.png"/></a>
					<a class="sublogo" href=""><img src="./Public/Home/image/logo_right.png"/></a>					
					<div class="search">
						<div class="shop_search">
							<input class="search_txt" type="text" name="" placeholder="搜流行宝贝" value="" />
							<button class="shop_search_btn shop_search_for_site js_search_site">搜全站</button>
							<button class="shop_search_btn shop_search_for_shop js_search_shop">搜本店</button>
						</div>
					</div>										
				</div>				
			</div>
			<!--搜索区域结束-->
		<!--商店logo及导航条区域-->
			<div id="shop_hd" class="shop_hd" style="height: 152px;">
				<a href="" class="top_banner" style="background: url(./Public/Home/image/shoplogo.jpg) no-repeat center center;"></a>
				<div id="shop_nav" class="shop_nav">
					<ul class="shop_nav_top">
						<li><a href="">店铺首页</a></li>
						<li class="js_new_goods shop_new_goods has_new_goods" style="display: inline-block;">
							<a href="" class="js_new_all">
								新品到货
								<span class="js_new_goods_num label_item_new">2</span>
								<i class="icon_tr">▾</i>
							</a>
							<ul class="shop_nav_nest shop_nav_new">
								<li>
									<a href="" class="js_newest_goods">
										2016-05-24新品
										<i class="label_item_num" style="color: #FF6699;">1</i>
									</a>
								</li>
								<li>
									<a href="" class="js_newest_goods">
										2016-05-24新品
										
									</a>
								</li>
								<li>
									<a href="" class="js_newest_goods">
										2016-05-24新品
										
									</a>
								</li>
								<li>
									<a href="" class="js_newest_goods">
										2016-05-24新品
										
									</a>
								</li>
								
							</ul>
						</li>
						<!--nav的内容-->
						<li class="js_nav_item"><a class="" href="" style="width:92px;padding-left: 5px;padding-right: 5px;">外套 T恤 棉衣</a></li>
						<li class="js_nav_item"><a class="" href="" style="width:92px; padding-left: 5px;padding-right: 5px;">外套 T恤 棉衣</a></li>
						<li class="js_nav_item"><a class="" href="" style="width:92px; padding-left: 5px;padding-right: 5px;">外套 T恤 棉衣</a></li>
						<li class="js_nav_item"><a class="" href="" style="width:92px; padding-left: 5px;padding-right: 5px;">外套 T恤 棉衣</a></li>
						<li class="js_nav_item"><a class="" href="" style="width:92px; padding-left: 5px;padding-right: 5px;">外套 T恤 棉衣</a></li>
						<li class="js_nav_item"><a class="" href="" style="width:92px; padding-left: 5px;padding-right: 5px;">外套 T恤 棉衣</a></li>
						<li class="js_nav_item"><a class="" href="" style="width:92px; padding-left: 5px;padding-right: 5px;">外套 T恤 棉衣</a></li>
						<li class="js_nav_item"><a class="" href="" style="width:92px; padding-left: 5px;padding-right: 5px;">外套 T恤 棉衣</a></li>
					</ul>
				</div>
			</div>
		<!--商店logo及导航条区域结束-->
		<!--商品内容区域-->	
			<div class="main">
				<div class="item_box">
					<div class="content twitter">
						<div class="item_sale">
							<h3 class="item_title">
								<a class="label_show" href="">[晒单]</a>
								<?php echo $goodsData['gname'];?>
							</h3>
							<h4 class="item_sub_title"><?php echo $goodsData['gname'];?></h4>
							<div class="item_price_info">
								<span class="price_now">￥<i class="num"><?php echo $goodsData['shopprice'];?></i></span>
								<span class="price_original">
									￥<i class="num"><?php echo $goodsData['marketprice'];?></i>
								</span>
								<span class="label_text" style="background: #ff9933;">免运费</span>
							</div>
							<!--预售信息-->
							<!--big promote-->
							<div class="big_promote_notice">
								<p style="background: #undefined;">
									<i class="logo" style="background: ;"></i>
									<span></span>
								</p>
								<a href="">undefined>></a>
							</div>
							<!--big promote end-->
							<ul class="item_promote_infos">
								<li class="js_promote_item">
									<i class="label_mark_limit">限</i>
									距离恢复原价仅剩
									<span class="countdown" data-remain="13742450.164999962">
										<i class="day countdown-time">159</i>
										天
										<i class="hour countdown-time">0</i>
										小时
										<i class="minute countdown-time">51</i>
										分
										<i class="second countdown-time">59</i>
										秒
									</span>
								</li>
								<li>
									<i class="label_mark_coupon">劵</i>
									<ol class="item_promotion">
										<li class="item_promotion_single">
											满99减5元优惠劵可领取
											<div class="dropdown_wrap coupon_wrap">
												<a href="javascript:;" class="red_f dropdown_wrap_btn js_coupon_btn">立即领取&nbsp;▾</a>
												<div class="dropdown_panel label_arrow_top">
													<div class="hd">领劵下单，更多优惠等你拿</div>
													<ul class="bd"></ul>
													<span class="info js_info red_f"></span>
												</div>
											</div>
										</li>
									</ol>
								</li>
								<li>
									<i class="label_mark_reduce">减</i>
									<a href="" class="js_promote_reduce_btn item_promote_btn">
										单笔订单满100元减2元<i>▾</i>
									</a>
									<div class="js_promote_reduce_panel item_promote_panel label_arrow_top">
										单笔订单满<i>100元</i>减<i>2元</i>,
										满<i>200元</i>减<i>5元</i>,
										满<i>300元</i>减<i>10元</i>,
										满<i>500元</i>减<i>20元</i>
										<p class="note">时间：2016.01.28--2016.12.31</p>
									</div>
								</li>
								<li>
									<i class="label_mark_discount">折</i>
									<a href="" class="js_promote_discount_btn item_promote_btn">
										单笔订单满3件打9.5折<i>▾</i>
									</a>
									<div class="js_promote_discount_panel item_promote_panel label_arrow_top">
										单笔订单满<i>3件</i>打<i>9.5折</i>,
										满<i>5件</i>打<i>9折</i>,

										<p class="note">时间：2016.01.28--2016.12.31</p>
									</div>
								</li>
								
								
							</ul>
							<div class="item_freight">
								<label for="">运  费</label>
								广东广州
								<span class="gray_f pl6_f">至</span>
								<!--<a class="pl6_f pr6_f city_name" href="" id="js_dest_ity">-->
									<!--<span class="js_city_name">北京</span>
									<i class="arrow_down"></i>-->
									<!--城市联动插件开始-->
									<select name="" id="area1"></select>
									<select name="" id="area2"></select>
									<select name="" id="area3"></select>
									<!--城市联动插件结束-->
								<!--</a>-->
								<span id="js_freight_text">免运费</span>
							</div>
							<ul class="item_data">
								<li>
									销量<span class="item_data_wrap">39件</span>
								</li>
								<li class="item_data_middle">
									好评率
									<span class="item_data_wrap"><a href="" id="js_comment">--</a>(2人)</span>
								</li>
								<li>喜欢<span class="item_data_wrap">1222人</span></li>
							</ul>
							<ul class="sku_meta"></ul>
							<div class="sku_info">
								<div class="skin">
									<p class="text none_f">
										<span class="close_z"></span>
										<span class="msg_ico"></span>
										请选择您要的商品信息
									</p>
									<?php 
										
									?>
									<dl class="prop">
										<dt>颜  色<span></span></dt>
										<dd>
											<ul class="item_colorlist has_image_color">
												{{foreach from="$goodsData['selected']" key="$k" value="$v"}}

													<?php if($v['taname']=='颜色'){ ?>
														{{foreach from="$v['spec']" key="$kk" value="$vv"}}
												<li class="img_list" gtid="{{$vv['gtid']}}" style="" spec="{{$vv['gtvalue']}}">										
													{{$vv['gtvalue']}}
												</li>
														{{endforeach}}
													<?php }?>
												{{endforeach}}
											</ul>
										</dd>
										
									</dl>
									<dl class="prop">
										<dt>尺  码<span></span></dt>
										<dd>
											<ul class="item_size_types">
												
												{{foreach from="$goodsData['selected']" key="$k" value="$v"}}
													{{if value="$v['taname']=='尺码'"}}
														{{foreach from="$v['spec']" key="$kk" value="$vv"}}
												<li class="size" gtid="{{$vv['gtid']}}" style="" spec="{{$vv['gtvalue']}}">
													{{$vv['gtvalue']}}
												</li>
														{{endforeach}}
													{{endif}}
												{{endforeach}}
											</ul>
										</dd>
										
									</dl>
									
									<dl class="amount">
										<dt>数  量</dt>
										<dd>
											<div class="item_stock">
												<input type="text" class="item_stock_num" value="1" title="请输入购买数量"/>
												<span class="item_stock_btns">
													<span class="item_stock_plus"><i class="icon_up"></i></span>
													<span class="item_stock_minus"><i class="icon_down"></i></span>
												</span>
											<span class="item_stock_reserve">(库存<span>1186</span>件)</span>
											</div>
											
											<!--异步改变对应规格的库存数量-->
											
											
										</dd>
									</dl>
									<dl class="mt10_f">
										<dt>客  服</dt>
										<dd>
											<a href="" class="goqq knilmi"><em class="qqico"></em>联系客服</a>
										</dd>
									</dl>
									<div class="msg_box">
										
									</div>
									<!--加入购物车，异步将数据存入session开始-->
									<script type="text/javascript">
									 	$(function(){
									 											 		
									 		$(".add_cart").click(function(){
									 			//抓取数据
					
												//商品id
												var id= {{$_GET['gid']}};
												//商品数量
												var num = $(".item_stock_num").val();
												//商品规格
												var spec = "";
												$.each($(".f"), function(k,v) {
													spec += $(this).attr("spec") + "|";
													
												});
												//alert($(".f").length)
												//判断点击对象的长度
												if($(".f").length<2){
													alert("请选择颜色或尺码");return false;
												}
												//添加成功																																			
												alert("添加购物车成功");													
												
												//异步提交到购物车
												$.ajax({
													//请求方式
													type:"post",
													//请求路径方法
													url:"{{U('Home/Cart/ajaxCart')}}",//请求Cart里面的ajaxCart方法
													//请求数据
													data:{id:id,num:num,spec:spec},//此处传id，商品名称，价格等可以通过查询数据库得到
													//返回数据类型
													dataType:"json",
													//返回处理
													success:function(cartData){
														
														//添加购物车成功后跳转到购物车页面
														location.href="{{U('Home/Cart/index')}}";
													}
												});
												
											})
									 	})
										
									</script>
									<!--加入购物车，异步将数据存入session结束-->
									<div class="btn_box">
										<a class="define" title="确定" style="display: none;">确定</a>
										<div class="same_btn">
											<a class="add_cart" title="加入购物车" style="background: #f93;"><em class="cartico"></em>加入购物车</a>
											<a class="buy_btn" title="立即购买"><em class="rmbico"></em>立即购买</a>
										</div>
									</div>
								</div>
							</div>
							<div class="item_spread">
								<div class="item_like_wrap">
									<a class="item_like_btn"><i class="icon_like"></i>喜欢<i class="item_like_num">(1542)</i></a>
									
									
								</div>
								<a class="item_share_btn">
									<i class="icon_share"></i>
									分享
								</a>
								<a class="add_in_magazine_btn">
									<i class="icon_magazine" title="收进杂志"></i>
								</a>
							</div>
						</div>
						
						<div id="picture" class="item_pic" style="overflow: hidden;">
							
							<div class="item_pic_origin" style="height: 675px;position: relative;">
								{{foreach from="$detailData['big']" key="$k" value="$v"}}
								
								<img src="{{$v}}" style="height: 675px;width:450px;position: absolute;left: 0;top: 0;" alt="" class="j_big_tip twitter_pic" />								
								
								<div class="item_pop_tip" style="bottom: 13px;opacity: 0;">
									<i class="icon_people"></i>
									<i class="num">52</i>
								</div>
								{{endforeach}}
							</div>
							
							
							
							<div class="item_pic_thumb">
								{{foreach from="$detailData['small']" key="$k" value="$v"}}
								<span class=""><img style="width: 68px;height: 68px;" src="{{$v}}"/></span>
								<!--<span class="active"><img width="68" src="./Public/Home/image/content_pic_small.jpg"/></span>-->
								{{endforeach}}
							</div>
							
							<!--点击小图，大图转换对应的图片-->
							<script type="text/javascript">
								$(function(){
									
								})
							</script>
							
						</div>
					</div>
				</div>
				<!--商品详情区-->
				<div class="box item_detail">
					<div class="content wrap js_ceiling_detail">
						<div class="js_tab_wrap" style="height: auto;">
							<div class="tab_tle">
								<h2 class="tab_top">
									<a href="javascript:;" class="tabArea cur">商品详情</a>
									<a href="javascript:;" class="tabArea eva">购买评价（<span class="twitter_comment_num">5</span>）</a>
									<a href="javascript:;" class="tabArea shopping">购物晒单（<span class="twitter_comment_num">4</span>）</a>
									<span class="add_cart"><em class="cartico"></em>加入购物车</span>
									
								</h2>
								<div class="detail_items">
									<a href="#da0" class="js_anchor_btn">规格尺码</a>
									<a href="#da1" class="js_anchor_btn">商品细节</a>
									<a href="#da2" class="js_anchor_btn">商品实拍</a>
								</div>
							</div>
						</div>
						<div class="contentArea">
							<div class="recom_banner" style="margin-top: 10px;">
								<a href=""><img src="./Public/Home/image/recom_banner.jpg"/></a>
							</div>
							<div class="daren">
								<a class="avatar"><img src="./Public/Home/image/daren.jpg"/></a>
								<div class="text">
									<p class="intro"><span class="extra_desc">店主推荐</span></p>
									<p class="desc">荷叶边褶皱雪纺上衣可以给你轻盈飘逸的感觉feel~它还是一款遮肉利器，所以有肉的妹子也不用担心，肩部的曲线完美的展现出，性感骨干~自带女性的柔美~其他一定要强带超级百搭显瘦哦~</p>
								</div>
							</div>
							<a name="da0" id="da0"></a>
							<h2 class="comm_tle">
								<span>规定尺码</span>
							</h2>
							<ul class="format">
								<li title="雪纺">材质：雪纺</li>
								<li title="短款">衣长：短款</li>
								<li title="短袖">袖长：短袖</li>
								<li title="直身">版型：直身</li>
							</ul>
							<p class="pro_txt">[尺码,衣长,胸围]：[S,49,90] [M,50,94] [L,51,98] [XL,52,102]</p>
							<a id="da1" name="da1"></a>
							<h2 class="comm_tle"><span>商品细节</span></h2>
							<div class="more_pic">
								<img class="load_img" src="./Public/Home/image/more_pic1.jpg" alt="" style="height: 686px;width: 710px;"/>
							</div>
							<p class="pro_txt"></p>
							<div class="more_pic">
								<img class="load_img" src="./Public/Home/image/more_pic1.jpg" alt="" style="height: 686px;width: 710px;"/>
							</div>
							<p class="pro_txt"></p>
							<a id="da2" name="da2"></a>
							<h2 class="comm_tle"><span>商品实拍</span></h2>
							<div class="more_pic">
								<img class="load_img" src="./Public/Home/image/more_pic1.jpg" alt="" style="height: 686px;width: 710px;"/>
							</div>
							<p class="pro_txt"></p>
							<div class="more_pic">
								<img class="load_img" src="./Public/Home/image/more_pic1.jpg" alt="" style="height: 686px;width: 710px;"/>
							</div>
							<p class="pro_txt"></p>
							<!--省略多张图片-->
							
							
							
							
							
						</div>
					</div>
					
					
				</div>
				
				<!--商品详情区结束-->
				
			</div>
		<!--商品内容区域结束-->
		</div>	
	</body>
</html>
